<template>
	<div class="addVideo">
		<el-dialog
			title="手动发送短信"
			:visible.sync="dialogVisible"
			width="800px"
			:modal-append-to-body="false"
			:close-on-click-modal="false"
			custom-class="custom-dialog"
		>
			<div class="answer-bot">
				<el-table
					ref="table"
					size="small"
					stripe
					border
					:data="tableData"
					:cell-style="() => ({ textAlign: 'center' })"
					:header-cell-style="() => ({ textAlign: 'center' })"
					@selection-change="handleSelectionChange"
				>
					<el-table-column type="selection" width="55" />
					<el-table-column
						label="用户编号"
						prop="member_id"
						min-width="120px"
						show-overflow-tooltip
						align="center"
					/>
					<el-table-column
						label="用户手机号"
						prop="mobile"
						min-width="120px"
						show-overflow-tooltip
						align="center"
					/>
					<el-table-column
						label="用户姓名"
						prop="true_name"
						min-width="120px"
						show-overflow-tooltip
						align="center"
					/>
					<el-table-column
						label="用户身份证号"
						prop="cid_no"
						min-width="180px"
						show-overflow-tooltip
						align="center"
					/>
				</el-table>
				<el-row type="flex" justify="center">
					<el-col :span="24" style="text-align: right">
						<Pagination
							:total="total"
							:page.sync="pageNo"
							:limit.sync="pageSize"
							scroll-el="el-main"
							@pagination="pageChange"
						/>
					</el-col>
				</el-row>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button style="margin-right: 5px" @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="saveVideos">发送</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	import { mapGetters } from 'vuex'
	import { sendMessage } from '@/api/message.js'
	import { getList } from '@/api/user-manager'
	import Pagination from '@/components/Pagination'
	export default {
		name: 'AddMessageSend',
		components: { Pagination },
		data() {
			return {
				dialogVisible: false,
				disabled: false,
				tableData: [],
				multipleSelection: [],
				pageNo: 1,
				pageSize: 10,
				total: 0,
				info: {}
			}
		},
		computed: {
			...mapGetters(['token', 'userInfo'])
		},
		methods: {
			async initData(info) {
				this.info = info
				await this.loadData()
				this.dialogVisible = true
			},
			pageChange({ page, limit }) {
				this.pageNo = page
				this.pageSize = limit
				this.loadData()
			},
			loadData() {
				const loading = this.$setLoading()
				this.tableData = []
				getList({
					page_no: this.pageNo,
					page_size: this.pageSize
				}).then(
					res => {
						this.tableData = res.data.lists
						this.total = Number(res.data.total)
						loading.close()
					},
					err => {
						console.log(err)
						loading.close()
					}
				)
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			// 保存
			async saveVideos() {
				if (!this.info.msg_id) {
					this.$message.error('请选择消息模版！')
					return
				}
				if (!this.multipleSelection.length) {
					this.$message.error('请选择发送消息的用户！')
					return
				}
				const loading = this.$loading({
					lock: true,
					text: '数据提交中~'
				})
				const func = sendMessage({
					msg_id: this.info.msg_id,
					member_ids: this.multipleSelection.map(item => item.member_id)
				})
				Promise.all([func])
					.then(res => {
						this.$message.success(`操作成功！`)
						this.dialogVisible = false
					})
					.finally(() => loading.close())
			}
		}
	}
</script>
<style lang="scss" scoped>
	.addVideo {
		::v-deep {
			.el-dialog .el-dialog__body {
				padding-bottom: 20px;
			}
			.el-form .el-form-item {
				margin-bottom: 18px;
			}
		}
		.box-wrap {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
		}
	}
</style>
